<template>
    <div>
         <el-form :inline="true" style="width: 100%;float:left" class="demo-form-inline">
        <el-form-item>
       <el-input v-model="input" placeholder="请输入内容" ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>


  

  <el-table
    :data="tableData"
    style="width: 100% ">

<el-table-column
      label="员工编号"
      width="180">
      <template slot-scope="scope">
     
        <span style="margin-left: 10px">{{scope.row.eid}}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="员工姓名"
      width="180">
      <template slot-scope="scope">
     
        <span style="margin-left: 10px">{{scope.row.ename}}</span>
      </template>
    </el-table-column>


   <el-table-column
      label="角色名称"
      width="180">
      <template slot-scope="scope">
     
        <span style="margin-left: 10px">{{scope.row.rname==null?'未分配':scope.row.rname}}</span>
      </template>
    </el-table-column>

 <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
           type="Brand"
          @click="handleEdit(scope.$index, scope.row)" >查看分配</el-button>
       
      </template>
    </el-table-column>
  </el-table>


 <el-dialog v-bind:title="beforeTitle+titleEname+afterTitle" :visible.sync="dialogFormVisible"
  style="width:100%" >
  
  
     <el-form  label-width="100px" class="demo-ruleForm">
      <el-form-item label="选择角色" prop="resource">
    <el-radio-group v-model="name">
  
      <el-radio v-for="choose in chooseDate" v-bind:label="choose.rname"></el-radio>
     

    </el-radio-group>
         </el-form-item>
</el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditok">确 定</el-button>
      </div>
    </el-dialog>



  </div>
</template>






<script>
  export default {
       data() {
        return {
            beforeTitle:'正在给',
            titleEname:'',
            afterTitle:'分配角色',
            input: '',
            name:'',
            updateEid:'',
            tableData: [{
                eid:'',
                ename:'',
                rname:'',

                
        }, ],
          chooseDate:[{
            rname:'',
            rid:''
          }],


       dialogFormVisible:false,

      }
    },
    created() {
             this.showAllEmpRole()
         
    },
    methods: {
      showAllEmpRole(){
        this.$axios.post("http://localhost:8888/hs/ever-role/findAllEmpsAndErole")
          .then((res) => {     
                  
              this.tableData=res.data.empAndRole
            console.log(res)
    })
      },
      handleEdit(index, row) { 
           this.updateEid=row.eid
          this.titleEname=row.ename
          this.dialogFormVisible = true
          
       this.$axios.post("http://localhost:8888/hs/ever-emprole/findOneErole?eid="+row.eid)
          .then((res) => {  
            
           
            this.name= res.data.oneErole==null?null:res.data.oneErole.rname
        
    }) 

        this.$axios.post("http://localhost:8888/hs/ever-role/findAllRoles")
          .then((res) => {     
      this.chooseDate=res.data.roles
          // console.log(res);
    })    
        
      },
    
     handleEditok(){
        this.dialogFormVisible = false;
        
         this.$axios.post("http://localhost:8888/hs/ever-emprole/updateOneErole?eid="+this.updateEid+"&rname="+this.name)
          .then((res) => {    
          
            this.showAllEmpRole()  
                  
    })    
        
      
     }
    }
    }
  
</script>